// 文章数据
const articlesData = {
    1: {
        title: "前端开发入门指南",
        date: "2024-01-15",
        category: "技术",
        image: "https://picsum.photos/800/400?random=1",
        content: `
            <p>前端开发是构建网站和Web应用程序用户界面的过程。它涉及HTML、CSS和JavaScript等技术。</p>
            <p>HTML（超文本标记语言）是网页的骨架，负责定义内容的结构。CSS（层叠样式表）则负责网页的样式和布局，让网站看起来美观。JavaScript为网页添加交互功能，使其能够响应用户的操作。</p>
            <p>学习前端开发的第一步是掌握HTML基础，了解各种标签的用途。然后是学习CSS，掌握选择器、盒模型、Flexbox和Grid布局等核心概念。最后是JavaScript，从基础语法开始，逐步学习DOM操作、事件处理等。</p>
            <p>现代前端开发还涉及许多工具和框架，如React、Vue等，但掌握基础知识是学习这些高级工具的前提。</p>
        `
    },
    2: {
        title: "响应式设计最佳实践",
        date: "2024-01-10",
        category: "设计",
        image: "https://picsum.photos/800/400?random=2",
        content: `
            <p>响应式设计是一种网页设计方法，使网站能够在各种设备上（从桌面电脑到移动手机）都能提供良好的用户体验。</p>
            <p>实现响应式设计的关键技术包括：</p>
            <ul>
                <li>流体网格布局：使用百分比而不是固定像素</li>
                <li>弹性图片：图片能够根据容器大小自动调整</li>
                <li>媒体查询：根据设备特性应用不同的CSS规则</li>
            </ul>
            <p>移动优先的设计策略是现代响应式设计的核心思想。首先为移动设备设计，然后逐步增强为大屏幕设备。</p>
            <p>测试是响应式设计的重要环节。确保在各种设备尺寸和浏览器上测试网站的显示效果。</p>
        `
    },
    3: {
        title: "JavaScript ES6+ 新特性",
        date: "2024-01-05",
        category: "编程",
        image: "https://picsum.photos/800/400?random=3",
        content: `
            <p>ES6（ECMAScript 2015）为JavaScript带来了许多重要的新特性，极大地改善了开发体验。</p>
            <p>箭头函数：提供了更简洁的函数语法，并且自动绑定this值。</p>
            <p>模板字符串：使用反引号（`）创建多行字符串和字符串插值。</p>
            <p>解构赋值：从数组或对象中提取值并赋给变量。</p>
            <p>let和const：提供了块级作用域的变量声明方式。</p>
            <p>类和模块：引入了基于类的面向对象编程和模块化系统。</p>
            <p>Promise和async/await：改善了异步编程的体验。</p>
            <p>这些特性使得JavaScript代码更加简洁、可读性更强，也更容易维护。</p>
        `
    }
};

// DOM元素
const sections = document.querySelectorAll('.section');
const navLinks = document.querySelectorAll('.nav-link');
const articleCards = document.querySelectorAll('.article-card');
const backButton = document.getElementById('back-to-list');
const articleDetailSection = document.getElementById('article-detail');
const homeSection = document.getElementById('home');

// 导航功能
function setupNavigation() {
    navLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const targetId = link.getAttribute('href').substring(1);
            
            // 隐藏所有section
            sections.forEach(section => {
                section.classList.remove('active');
            });
            
            // 显示目标section
            const targetSection = document.getElementById(targetId);
            if (targetSection) {
                targetSection.classList.add('active');
            }
        });
    });
}

// 文章卡片点击事件
function setupArticleCards() {
    articleCards.forEach(card => {
        card.addEventListener('click', () => {
            const articleId = card.getAttribute('data-id');
            showArticleDetail(articleId);
        });
    });
}

// 显示文章详情
function showArticleDetail(articleId) {
    const article = articlesData[articleId];
    
    if (article) {
        // 更新文章详情内容
        document.getElementById('detail-title').textContent = article.title;
        document.getElementById('detail-date').textContent = article.date;
        document.getElementById('detail-category').textContent = article.category;
        document.getElementById('detail-image').src = article.image;
        document.getElementById('detail-image').alt = article.title;
        document.getElementById('detail-content').innerHTML = article.content;
        
        // 切换到文章详情页
        sections.forEach(section => {
            section.classList.remove('active');
        });
        articleDetailSection.classList.add('active');
    }
}

// 返回文章列表
function setupBackButton() {
    backButton.addEventListener('click', () => {
        sections.forEach(section => {
            section.classList.remove('active');
        });
        homeSection.classList.add('active');
    });
}

// 联系表单处理
function setupContactForm() {
    const contactForm = document.querySelector('.contact-form');
    
    contactForm.addEventListener('submit', (e) => {
        e.preventDefault();
        
        const formData = new FormData(contactForm);
        const name = formData.get('name');
        const email = formData.get('email');
        const message = formData.get('message');
        
        // 在实际应用中，这里应该发送数据到服务器
        // 这里我们只做一个简单的成功提示
        alert(`感谢 ${name} 的留言！我们会尽快回复您。`);
        contactForm.reset();
    });
}

// 初始化函数
function init() {
    setupNavigation();
    setupArticleCards();
    setupBackButton();
    setupContactForm();
    
    // 默认显示首页
    homeSection.classList.add('active');
}

// 当DOM加载完成时初始化
document.addEventListener('DOMContentLoaded', init);